<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <link rel="stylesheet" href="/layui/css/formSelects-v4.css" media="all ">
    <script src="${path}/layui/layui.js"></script>
    <script src="${path}/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/assets/css/bootstrap.css">
    <style>
        .layui-form-item{
            margin: 10px 0px;
        }
        .shangchuan{
            margin-top: 50px;
            margin-left: 20px;
        }
    </style>
    <script>
        layui.use(['form','layer','table','upload'], function(){
            var upload = layui.upload;

            //执行实例
            upload.render({
                elem: '#test1' //绑定元素
                ,url: '/file/upload' //上传接口
                ,accept: 'file'
                ,auto: false
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#test1').attr('src', result); //图片链接（base64）
                    });
                    console.log('文件上传中');
                }
                ,done: function(res){
                    //上传完毕回调
                    //如果上传失败
                    if(res.code > 0){//自定义返回失败
                        return layer.msg('上传失败');
                    }else{
                        $('#pic').val(res.img);
                    }
                    //上传成功
                }
            });
            // var uploadInst = upload.render({
            //     elem: '#test1'
            //     ,before: function(obj){
            //         //预读本地文件示例，不支持ie8
            //         obj.preview(function(index, file, result){
            //             $('#demo1').attr('src', result); //图片链接（base64）
            //         });
            //     }
            // });

        });
    </script>

</head>
<body>
<h2>个人信息</h2>
<form class="layui-form" lay-filter="userForm" id="update_user_form" action="" style="padding:15px 10px;" enctype="multipart/form-data">
    <%--<div class="layui-form-item">--%>
        <%--<label class="layui-form-label">头像</label>--%>
        <%--<div class="layui-input-block">--%>
            <%--<input type="hidden" id="pic" >--%>
            <%--<img src="" name="picture" id="picture" class="img-thumbnail" alt="" width="80px">--%>
            <%--<button type="button" class="layui-btn layui-btn-sm shangchuan" id="test1">--%>
                <%--<i class="layui-icon">&#xe67c;</i>上传图片--%>
            <%--</button>--%>
        <%--</div>--%>
    <%--</div>--%>
    <div class="layui-form-item">
        <input type="hidden" name="id">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="username" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">加密盐值</label>
        <div class="layui-input-block">
            <input type="text" name="salt" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="phone" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">住址</label>
        <div class="layui-input-block">
            <input type="text" name="address" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked>
            <input type="radio" name="sex" value="女" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否锁定</label>
        <div class="layui-input-block">
            <input type="checkbox" name="available" lay-skin="switch" value="1">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户角色</label>
        <div class="layui-input-block" >
            <select name="roleIds" id="roles_add" xm-select="roles" disabled>
            </select>
        </div>

    </div>
    <div class="layui-form-item" style="margin-top: 10px;width: 200px;float: right">
        <div class="layui-inline">
            <button type="button" class="layui-btn" onclick="updateinfo();">修改</button>
            <button type="button" class="layui-btn">取消</button>
        </div>
    </div>
    <script>
        layui.use("form",function () {
            layui.form.render();
            $.get("${path}/User/info",function (data) {
                //显示数据
                layui.form.val('userForm',data);
                // alert(data.roles[0].id)
                //注释
                // $("#roles_add").val(data.roles[0].id);
                layui.form.render();
                var aa="/images/"+data.picture;
                $("#picture").attr("src",aa);
            })

        });
        $.get("${path}/User/search",function(data){
            $.each(data,function(){
                var opt = $("<option></option>").appendTo("#roles_add");
                opt.text(this.rolename).val(this.id);
            });
            // layui.formSelects.render();

        });

        function updateinfo() {
            var params=$("#update_user_form").serialize();
            console.log(params)
            $.post("${path}/User/updateuser",params,function () {
                layer.msg("修改成功")
            })
        }

    </script>
</form>
</body>
</html>
